<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.3.0/css/layui.css}" media="all">
</head>
<style>
    .site-doc-icon li{width: 222px;}
    .site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}

    .layui-anim {
        width: 125px;
        height: 125px;
        line-height: 125px;
        margin: 0 auto 10px;
        text-align: center;
        background-color: #009688;
        cursor: pointer;
        color: #fff;
        border-radius: 50%;
    }
</style>

<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-header timo-card-header">
        <span><i class="fa fa-bars"></i> 我的考勤</span>
        <i class="layui-icon layui-icon-refresh refresh-btn"></i>
    </div>
    <div class="layui-card-body site-doc-icon site-doc-anim" style="margin-bottom:100px">

            <div class="layui-anim"  data-anim="layui-anim-scale" style="position:absolute;left:40%;font-size: bolder">
                <a class="ajax-get" style="font-size: 25px" data-msg="是否上班打卡" th:href="@{/business/punch/record/1}">上班</a>
            </div>

            <div class="layui-anim .ajax-get"  data-anim="layui-anim-scaleSpring" style="background-color:#0055ff;font-size:bolder;position:absolute;left:50%;margin-left:100px;">
                <a  class="ajax-get" style="font-size: 25px;" data-msg="是否下班打卡" th:href="@{/business/punch/record/2}"> 下班</a>
            </div>

    </div>

    <div class="layui-card-body">

        <div class="layui-row timo-card-screen">


        </div>
        <div class="timo-table-wrap">
            <table class="layui-table timo-table">
                <thead>
                <tr>
                    <th class="timo-table-checkbox">
                        <label class="timo-checkbox"><input type="checkbox">
                            <i class="layui-icon layui-icon-ok"></i></label>
                    </th>
                    <th>用户ID</th>
                    <th>用户名称</th>
                    <th>打卡类型</th>
                    <th>打卡时间</th>
                    <th>是否异常</th>


                </tr>
                </thead>
                <tbody>
                <span th:each="item:${list}">
                    <td><label class="timo-checkbox"><input type="checkbox" th:value="${item.id}">
                        <i class="layui-icon layui-icon-ok"></i></label></td>
                    <td th:text="${item.userId}">用户ID</td>
                     <td th:text="${item.userName}">用户名称</td>
                    <td th:utext="${item.type} == 1?'<span style=color:green>上班</span>':'<span style=color:blue>下班</span>'">打卡类型</td>
                    <td th:text=" ${#dates.format(item.recordTime,'yyyy-MM-dd HH:mm:ss')}">打卡时间</td>
                     <td th:utext="${item.late} == 1?'<span style=color:red>异常</span>':'<span style=color:green>正常</span>'">是否异常</td>

                    </tr>
                </tbody>
            </table>
        </div>
        <div th:replace="/common/my_fragment :: page"></div>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script>
    layui.use(['element', 'laydate', 'form','layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var dv = $(".dict-value");
        $(window).on("resize", function () {
            var width = $("body").width();
            if (width > 1200) {
                dv.css("max-width", width * 0.32);
            } else {
                dv.css("max-width", width * 0.20);
            }
        }).resize();

        var laydate = layui.laydate;
        laydate.render({
            elem: '#laydate',
            type: 'month'

        });



        $('.site-doc-icon .layui-anim').on('click', function(){
            var othis = $(this), anim = othis.data('anim');

            //停止循环
            if(othis.hasClass('layui-anim-loop')){
                return othis.removeClass(anim);
            }

            othis.removeClass(anim);

            setTimeout(function(){
                othis.addClass(anim);
            });
            //恢复渐隐
            if(anim === 'layui-anim-fadeout'){
                setTimeout(function(){
                    othis.removeClass(anim);
                }, 1300);
            }




        });

    });
</script>
</body>
</html>